<template>
  
  <a-layout class="layout-demo" theme="dark">
    <a-layout-sider
      theme="dark"
      breakpoint="lg"
      :width="220"
      collapsible
      :collapsed="collapsed"
      @collapse="onCollapse"
    >
      <div class="logo">PrimeStrike</div>
      <a-menu
        :defaultOpenKeys="['1']"
        :defaultSelectedKeys="['0_2']"
        @menuItemClick="onClickMenuItem"
      >
        <a-menu-item key="0_3"><icon-bar-chart />数据监控</a-menu-item>
        <a-sub-menu key="4">
          <template #title>
            <span><icon-search />预测入口</span>
          </template>
          <a-menu-item key="4_1">域名预测入口</a-menu-item>
          <a-menu-item key="4_2">IP预测入口</a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="2">
          <template #title>
            <span> <icon-relation />全景态势</span>
          </template>
          <a-menu-item key="2_1">全景图</a-menu-item>
          <a-menu-item key="2_2">组织列表</a-menu-item>
        </a-sub-menu>

        <a-menu-item key="0_2">
          <icon-robot-add />
          智能问答
        </a-menu-item>

      </a-menu>
    </a-layout-sider>
    <a-layout >
      <a-layout-header>
        <a-breadcrumb :style="{ margin: '0 24px' }">
          <template v-for="(item, index) in breadcrumbList" :key="index">
            <a-breadcrumb-item>{{ item }}</a-breadcrumb-item>
          </template>
        </a-breadcrumb>
      </a-layout-header>
      <a-layout style="padding: 0 24px">
        <a-breadcrumb :style="{ margin: '16px 0' }">
        </a-breadcrumb>
        <a-layout-content>
          <router-view></router-view>
        </a-layout-content>
        
        <a-layout-footer>PrimeStrike</a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>

</template>
<script>
import { defineComponent, ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import {
  IconHome,
  IconCalendar,
} from '@arco-design/web-vue/es/icon';
import { useRouter } from 'vue-router';
export default defineComponent({
  components: {
    IconHome,
    IconCalendar,
  },
  setup() {
    const collapsed = ref(false);
    const breadcrumbList = ref([]);
    const router = useRouter();
    const menuMap = {
      '0_3': '数据监控',
      '1_1': '历史数据',
      '1_2': '新增数据',
      '4': '预测入口',
      '4_1': '域名预测入口',
      '4_2': 'IP预测入口',
      '2': '全景态势',
      '0_2': '智能问答',
      '2_1':'全景图',
      '2_2':'组织列表'
    };

    const onCollapse = (val, type) => {
      collapsed.value = val;
    };

    const onClickMenuItem = (key) => {
      const keys = key.split('_');
      if (keys.length === 1) {
        breadcrumbList.value = [menuMap[key]];
      } else {
        breadcrumbList.value = [menuMap[keys[0]], menuMap[key]];
      }
      switch (key) {
        case '2_1':
          router.push('/panoramic/panoramic-situation');
          break;
        case '2_2':
          router.push('/panoramic/grouplist');
          break;
        case '0_3':
          router.push('/datamonitoring');
          break;
        case '0_1':
          router.push('/panoramic-situation');
          break;
        case '0_2':
          router.push('/intelligent-qa');
          break;
        case '1_1':
          router.push('/data-monitoring/historical-data');
          break;
        case '1_2':
          router.push('/data-monitoring/new-data');
          break;
        case '4_1':
          router.push('/prediction-entry/domain-prediction');
          break;
        case '4_2':
          router.push('/prediction-entry/ip-prediction');
          break;
        default:
          break;
      }
    
    };

    return {
      collapsed,
      onCollapse,
      breadcrumbList,
      onClickMenuItem
    };
  }
});
</script>
<style scoped>
.layout-demo {
  height: 100vh;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  color: white; /* 设置文字颜色为白色 */
  font-size: 20px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  text-align: center; /* 文字居中 */
}
.layout-demo :deep(.arco-layout-sider-light) .logo{
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header)  {
  height: 64px;
  line-height: 64px;
  background: #2c2c2d;
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: #232324; 
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content)  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

:deep(.arco-breadcrumb-item:last-child) {
    color: var(--color-text-3);
    font-weight: 500;
}

:deep(.arco-breadcrumb-item){
  color: var(--color-text-4);
}
</style>    